<script setup lang="ts">
  import { ref,watch } from 'vue'

  // watch(source, callback, options);  
  /*  source：要观察的响应式数据，可以是一个数据属性、计算属性或 getter 函数。
      callback：当被观察的数据变化时会调用的函数，接收两个参数：新的值和旧的值。
      options：可选参数，用于配置 watch 的特性，例如 immediate（是否立即执行回调）和 deep（是否深度观察对象）。
  */

  let num = ref(0);
  let stopww = watch(num,(newValue,oldValue)=>{
    console.log(`sum变化了,改变前:${oldValue},改变后:${newValue}`)
    if(newValue>=5){
      console.log('停止监听')
      stopww()  //终止监听,就是单纯再次调用一下这个监听函数
    }
  })

</script>
<template>
    <div class="home">
        <h2>num值:{{num}}</h2>
        <button @click="num++">num+1</button>
    </div>
</template>
<style scoped>
  h2{
    color: cadetblue;
  }
</style>